/*
document:
        1. getElementById(): 获取指定id的元素
        2. getElementsByName(): 获取指定name的元素，通常是表单
        2. getElementsByClassName(): 获取指定class的元素
        3. getElementsByTagName(): 获取指定标签名的元素

        4. querySelector(): 获取指定选择器的元素
        5. querySelectorAll(): 获取指定选择器的所有元素

        6. createElement(): 创建一个元素
        7. createTextNode(): 创建一个文本节点
        8. createAttribute(): 创建一个属性

        9. appendChild(): 将内容或者子元素放到容器中
        10. setAttribute(): 设置元素的属性

*/
document.getElementsByTagName('h1')[0].innerHTML = 'Hello World';
/**
 * innerHTML: 设置或者获取元素的HTML内容（可以识别标签）
 * innerText: 设置或者获取元素的文本内容
 */

var text = document.createTextNode('我是文本内容')
var e = document.createElement('h2')
e.style.color = 'skyblue'
e.appendChild(text)

var container = document.querySelector('.container')
container.appendChild(e)

var roots = document.querySelector('#root')
roots.className = 'box box1'
roots.classList.add('nav')
roots.classList.remove('box')

/** classList:
      * add(): 添加一个类
      * remove(): 移除一个类
      * toggle(): 切换一个类
      * contains(): 判断是否包含一个类
 */

/** Element获取元素位置：
 *      clientWidth: 元素宽度（包含padding，不包含border、margin）
 *      clientHeight: 元素高度（包含padding，不包含border、margin）
 *      offsetWidth: 元素宽度（包含padding、border，不包含margin）  
 */

/** DOM0事件与DOM2事件：
 *      DOM0事件：通过on开头的事件，例如onclick、onmouseover、onmouseout等
 *                如：roots.onclick = function() {}
 *                备注：此方法无法同时绑定多个事件
 * 
 *      DOM2事件：addEventListener、removeEventListener
 *                如：roots.addEventListener('click', function() {})
 */

/** 函数默认的参数event:
 *    event.target: 触发事件的元素 
 *    event.type: 触发事件的类型
 *    stopPropagation: 阻止事件冒泡
 *    preventDefault: 阻止默认事件
 */

